body,p,dl,dd{
    padding: 0;
    margin: 0;
}
.mark{
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    filter: blur(8px);
}




#wrapp{
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    padding-top: 15vw;
    box-sizing: border-box;
    position: relative;
    .record{
        width: 70vw;
        height: 70vw;
        display: flex;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #000;
        position: relative;
        img{
            width: 80%;
            height: 80%;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        img.rotating{
            animation: rotat 15s linear infinite;
        }
        @keyframes rotat {
            0%{
                transform:translate(-50%,-50%) rotate(0deg);
            }
            100%{
                transform:translate(-50%,-50%) rotate(360deg);
            }
        }
    }

    .title{
        margin-top: 6vw;
        color: #fff;
        height: 20vh;
        text-align: center;
        h2{
            font-weight: normal;
            font-size: 24px;
            margin-bottom: 3vw;
        }
        p{
            font-size: 14px;
        }
    }

    .progressBar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: #fff;
        .lineTime{
            flex-grow: 1;
            height: 8vw;
            position: relative;
            div{
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
            .line{
                width: 100%;
                height: 0.6vw;
                background-color: #ccc;
            }
            .dot{
                width: 2vw;
                height: 2vw;
                border-radius: 50%;
                transform: translate(-50%,-50%);
                background-color: #fff;
                background-clip: content-box;
                z-index: 2;
                border: 2vw solid rgba(0, 255, 255, 0);
            }

            .bag{
                width: 0%;
                height: 0.8vw;
                background-color: #fff;
            }
        }
        span{
            padding: 0 4vw;
        }
    }

    .list{
        width: 100vw;
        position: absolute;
        bottom: 0;
        z-index: 4;
        background: linear-gradient(#050505, rgba(170, 170, 170, 0.95));
        color: #fff;
        font-size: 16px;
        transition: transform .5s;
        transform: translateY(100%);
        
        dd{
            padding-left: 3vw;
            height: 12vw;
            line-height: 12vw;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        dd.action{
            color: #56b287;
        }

        dt{
            text-align: center;
            height: 12vw;
            line-height: 12vw;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        button{
            color: #fff;
            font-size: 16px;
            padding: 0;
            outline: none;
            border: none;
            width: 100%;
            height: 12vw;
            line-height: 12vw;
            background-color: transparent;
        }

    }

    .songFoot{
        width: 100vw;
        height: 16vw;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        i{
            width: 20%;
            background-size: 30%;
            background-repeat: no-repeat;
            background-position: center center;
        }

        i:nth-child(1){
            background-image: url(../images/icon-like.png);
        }
        i:nth-child(2){
            background-image: url(../images/icon-prev.png);
        }
        i:nth-child(3){
            background-image: url(../images/icon-play.png);
        }
        i:nth-child(4){
            background-image: url(../images/icon-next.png);
        }
        i:nth-child(5){
            background-image: url(../images/icon-list.png);
        }

        i:nth-child(1).action {
            background-image: url(../images/icon-like-solid.png);
        }
        i:nth-child(3).action {
            background-image: url(../images/icon-pause.png);
        }
       
       
    }
}






